<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" th:href="@{/css/main.css}"/>

    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }

        .am-popup-bd {
            background: #ffffff!important;
        }

        .close_css {
            float: right;
        }
    </style>
</head>
<script type="application/javascript">

    function copyLink() {
        $("#inviteLink_input").focus();
        $("#inviteLink_input").select();
        document.execCommand('copy', false, null);
        $("#copy_btn").text("copied!");
    }

    var getYearWeek = function (a, b, c) {
        /*
        date1是当前日期
        date2是当年第一天
        d是当前日期是今年第多少天
        用d + 当前年的第一天的周差距的和在除以7就是本年第几周
        */
        var date1 = new Date(a, parseInt(b) - 1, c),
            date2 = new Date(a, 0, 1),
            d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
        return Math.ceil((d + ((date2.getDay() + 1) - 1)) / 7);
    };

    $(function () {
        var date = new Date();
        $("#computeYearNum").html(date.getFullYear());
        $("#computeWeekNum").html(getYearWeek(date.getFullYear(), date.getMonth() + 1, date.getDay()));

        $("#export_btn").on('click', function (e) {
            $('#my-popup').modal();
        });

        $("#upload_btn").on('click', function (e) {
            $('#my-upload').modal();
        });

        $("#generateLink_btn").on('click', function (e) {
            var creatorName = $("#creator").val();
            var week = $("#week").val();
            var template = $('input[name="doc-radio-1"]:checked').val();
            var split = template.split('_');
            var templateId = split[0];
            var isEnhance = split[1];
            if (creatorName == '') {
                swal("缺少参数", "请填写创建人!", "error");
                return;
            }
            if (week == '') {
                swal("缺少参数", "请填写\"周\"!", "error");
                return;
            }
            if (!templateId) {
                swal("缺少参数", "请选择\"模板\"!", "error");
                return;
            }
            $.ajax({
                url: "/invite/create",
                data: {
                    creatorName: creatorName,
                    weekNum: week,
                    templateId: templateId,
                    isEnhance: isEnhance
                },
                dataType: "json",
                type: "POST",
                beforeSend: function (XHR) {
                    $.AMUI.progress.start();
                },
                complete: function () {
                    $.AMUI.progress.done();
                },
                success: function (result) {
                    if (result.respCode == 1000) {
                        $("#inviteLink_input").val(result.inviteLink);
                        $('#your-modal').modal();
                    } else {
                        swal("抱歉!", result.respMsg, "error");
                    }
                },
                error: function (xmlHttpReq, error, ex) {
                    swal("发生了一些问题", JSON.stringify(xmlHttpReq.responseJSON.errors), "error");
                }
            });
        });
        $('#doc-form-file').on('change', function() {
            var fileNames = '';
            $.each(this.files, function() {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list').html(fileNames);
            var file = document.getElementById('doc-form-file').files[0];
            var check = $("#isEnhance").is(':checked');
            var isEnhance = check?"1":"0";
            var formdata=new FormData();
            formdata.append('file', file);
            formdata.append('isEnhance', isEnhance);
            $.ajax({
                url: "/templates/upload",
                type: 'post',
                data: formdata,
                dataType: "json",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    if (result.respCode == 1000) {
                        swal("恭喜!", result.respMsg, "success");
                        console.log(result.data);
                        var id = result.data.id;
                        var name = result.data.name;
                        if (isEnhance) {
                            $("#template_add").append("<div class='am-radio' id = 'template_add"+ id +"'> <label> <input type='radio' name='doc-radio-1' value=" +id+ "_1" + "><span>" +name+ "</span> <a class='am-badge am-badge-secondary am-round'>增强周报</a></label> <a class='am-close close_css' onclick='deleteTemplate("+id+")'>&times;</a> <hr> </div>");
                        } else {
                            $("#template_add").append("<div class='am-radio' id = 'template_add"+ id +"'> <label> <input type='radio' name='doc-radio-1' value=" +id+ "_0" + "><span>" +name+ "</span> </label> <a class='am-close close_css' onclick='deleteTemplate("+id+")'>&times;</a> <hr> </div>");
                        }

                    } else {
                        swal("抱歉!", result.respMsg, "error");
                    }
                },
                error: function (xmlHttpReq, error, ex) {
                    swal("发生了一些问题", "错误", "error");
                }
            });
        });
    });

    function exportExcel(id) {
        var $eleForm = $("<form method='post'></form>");
        var idSplit = id.split(',');
        console.log("weekNum=" + idSplit[0] + "&inviteName=" + idSplit[1] + "&templateId=" + idSplit[2] + "&isEnhance=" + idSplit[3])
        $eleForm.attr("action", "/export?weekNum=" + idSplit[0] + "&inviteName=" + idSplit[1] + "&templateId=" + idSplit[2] + "&isEnhance=" + idSplit[3]);
        $(document.body).append($eleForm);
        //提交表单，实现下载
        $eleForm.submit();
    }

    function deleteTemplate(id) {
        $.ajax({
            url: "/deleteTemplate",
            data: {
                id: id
            },
            dataType: "json",
            type: "POST",
            beforeSend: function (XHR) {
                $.AMUI.progress.start();
            },
            complete: function () {
                $.AMUI.progress.done();
            },
            success: function (result) {
                if (result.respCode == 1000) {
                    swal("恭喜!", result.respMsg, "success");
                    $("#template_add" + id).remove();
                } else {
                    swal("抱歉!", result.respMsg, "error");
                }

            },
            error: function (xmlHttpReq, error, ex) {
                swal("发生了一些问题", xmlHttpReq.responseJSON.error, "error");
            }
        });
    }
</script>
<body>
<div class="header">
    <div class="am-g">
        <h1>周报工具Bate V2.0</h1>
        <p>Integrated Development Environment
            <br/>
            <a href="javascript:void(0);" id="upload_btn">上传模板</a>、
            <a href="/explain">模板说明</a>、收集、
            <a href="javascript:void(0);" id="export_btn">导出</a>工具</p>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">

        <h3>选择模板</h3>
        <div id="template_add">
            <div class="am-radio template_default">
                <label>
                    <input type="radio" name="doc-radio-1" value="0" checked>
                    默认
                </label>
                <hr>
            </div>
            <div class="am-radio" th:each="template : ${templateList}" th:id = "'template_add' + ${template.id}">
                <label>
                    <input type="radio" name="doc-radio-1" th:value="${template.id}+'_'+${template.isEnhance}">
                    [[${template.name}]] <a class='am-badge am-badge-secondary am-round' th:if = '${template.isEnhance} == 1'>增强周报</a>
                </label>
                <a href="#" class="am-close close_css" th:attr="id=${template.id}" onclick="deleteTemplate(id)">&times;</a>
                <hr>
            </div>
        </div>
        <br>
        <h3>创建邀请</h3>
        <form method="post" class="am-form">
            <label for="creator">创建人:</label>
            <input type="text" name="" id="creator" value="">
            <br>
            <br>
            <br/>
            <div class="am-cf">
                <input type="button" name="" value="生  成" class="am-btn am-btn-primary am-btn-sm am-fl js-modal-open"
                       id="generateLink_btn">
            </div>
        </form>
        <hr>
        <p>© 2020 XXXX版权所有 . Licensed under MIT license.</p>
    </div>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="your-modal">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">邀请链接
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <form class="am-form">
                <div class="am-form-group">
                    <input type="text" readonly id="inviteLink_input" class="am-form-field" placeholder="邀请链接">
                </div>

                <button type="button" id="copy_btn" class="am-btn am-btn-primary" onclick="copyLink()">拷贝!</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
